<!-- 
插值表达式{}
插值表达式是一种Vue的模板语法
1.作用：利用表达式进行插值，渲染到页面中,表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
2.语法：{表达式}
3.注意点：
（1）使用的数据必须存在（data）
（2）支持的是表达式，而非语句，比如：if for...
（3）不能在标签属性中使用{}插值 
-->

<div id="app">
    <p>{{nickname}}</p>
    <p> {{nickname.toUpperCase()}}</p>
    <p>{{nickname+'你好'}}</p>
    <p>{{age >= 18? '成年':'未成年'}}</p>
    <p>{{friend.name}}</p>
    <p>{{friend.desc}}</p>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        //通过el配置选择器，指定Vue管理的是哪个盒子
        el: '#app',
        data: {
            nickname: 'Tom',
            age: 18,
            friend: {
                name: 'tony',
                desc: "热爱学习 Vue"
            }
        }
    })
</script>